<template>
  <view v-if="detail.pics">
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(v, i) in detail.pics" :key="i">
        <view class="swiper-item">
          <image :src="v.pics_mid_url" mode="widthFix" class="banner"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="goods-info">
      <text class="title">{{ detail.goods_name }}</text>
      <text class="price">单价 ￥：{{detail.goods_price}}</text>
    </view>
    <!-- 富文本 -->
    <rich-text :nodes="detail.goods_introduce"></rich-text>
    <!-- 导航栏 -->
    <uni-goods-nav class="goods-carts" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
      @buttonClick="buttonClick" />
  </view>
</template>

<script>
  import {
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    watch: {
      totalCount: {
        handler(newValue) {
          this.options[2].info = newValue
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters('car', ['totalCount'])
    },
    data() {
      return {
        detail: {},
        goods_id: 0,
        options: [{
          icon: 'headphones',
          text: '客服'
        }, {
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: "red"
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    methods: {
      ...mapMutations('car', ['addCarList']),
      onClick(e) {
       if(e.index === 2) {
         uni.switchTab({
           url: '/pages/car/car'
         })
       }
      },
      buttonClick(e) {
        const { index } = e
        if(index === 0) {
          this.handleAddCar()
        }
      },
      handleAddCar() {
        // * 图片 goods_small_logo
        // * 单价 goods_price
        // * 标题 goods_name
        // * 状态 goods_state
        // * 数量 goods_count
        // * ID   goods_id
        const data = {
          goods_small_logo: this.detail.goods_small_logo,
          goods_price: this.detail.goods_price,
          goods_name: this.detail.goods_name,
          goods_state: true,
          goods_count: 1,
          goods_id: this.detail.goods_id
        }
        this.addCarList(data)
      },
      async getDetail() {
        const [error, resp] = await uni.request({
          url: `https://www.uinav.com/api/public/v1/goods/detail?goods_id=${this.goods_id}`
        })
        console.log(resp)
        this.detail = resp.data.message
      }
    },
    onLoad(options) {
      const {
        goods_id
      } = options
      this.goods_id = goods_id;

      this.getDetail()
    }
  }
</script>

<style lang="scss">
  .swiper {
    width: 100%;
    height: 400upx;

    .banner {
      width: 100%;
      height: 400upx;
    }
  }

  .goods-info {
    display: flex;
    flex-direction: column;
    padding: 20upx;

    .title {
      font-size: 24upx;
      font-weight: bold;
    }

    .price {
      color: red;
      margin: 20upx 0;
    }
  }

  .example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
  }

  .goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 0;
  }
</style>
